<template>
  <div>
    <swiper class="swiper" indicator-active-color="white" indicator-dots=true indicator-color="#C9C3C0" :autoplay="true" :interval="3000" :duration="500" :circular="true">
      <div v-for="(img, index) in swiperImgs" :key='index'>
        <swiper-item>
          <a hover-class="none" :href="img.href"><img class="item" :src="img.image" mode="aspecFit"></a>
        </swiper-item>
      </div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: ['swiperImgs']
}
</script>

<style>
.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 50rpx;
}
</style>


<style lang='scss'>
.swiper {
  background: url(../images/bannerBg.png) no-repeat;
  background-size: 100% 100%;
  width: 750rpx;
  height: 500rpx;
  swiper-item{
    text-align: center;
  }
  .item {
    width: 700rpx;
    height: 430rpx;
    margin-top:24rpx;
    margin-left:-1rpx;
    border-radius: 20rpx;
  }
}
</style>

